<template>
	<view class="TutorStatusCards" @tap="tapOrderDetails(item)" v-for="(item,index) in list" :key="index">
		<view class="card item">
			<view class="top">
				<view style="display: flex;align-items: center;">
					<tui-icon margin="4rpx" size="20" color="#c06c58" name="order"></tui-icon>
					<view style="color: #d46c4b;display: flex;align-items: center">
						<text>订单金额：</text>
						<text style="font-size: 36rpx;">￥{{item.actualAmount}}</text>
					</view>
				</view>
				<text class="invite" v-if="item.status*1===1">邀约中</text>
				<text class="invite" v-else-if="item.status*1===2">已确认</text>
				<text class="invite" v-else-if="item.status*1===3">待开始</text>
				<text class="invite" v-else-if="item.status*1*1===4">服务中</text>
				<text class="invite" v-else-if="item.status*1===5">待评价</text>
				<text class="invite" v-else-if="item.status*1===6">已完成</text>
				<text class="invite" v-else-if="item.status*1===7">已关闭</text>
				<text class="invite" v-else-if="item.status*1===8">拒绝</text>
			</view>
			<view class="content">
				<view class="content_lt">
					<image class="image" :src="ossUrl+item.avatar"></image>
				</view>
				<view class="content_rt">
					<text class="tp_lt">{{item.appellation}}</text>
					<view class="ct">
						<view><text class="ct_tp">邀约类型：{{item.reserveType}}</text></view>
						<view><text class="ct_c">邀约地址：{{item.inviteMerchant&&item.inviteMerchant.address}}</text></view>
						<view><text class="ct_bt">客户备注：{{item.invite&&item.invite.remark}}</text> </view>
					</view>
				</view>
			</view>
			<view class="flex align-center justify-between mx-2 fs-24 ft777777 mb-1">
				<text>车程计价{{item.transportFeeUnitPrice||0}}元/km，全程{{item.distance || 0}}km</text>
				<view class="ft333333 flex align-center">车费：<text
						class="ft63d6d3 font-weight-bold fs-28">￥{{item.transportFee || 0}}</text></view>
			</view>
			<view class="bottom">
				<text>预约时间：{{item.reserveDate}} {{item.reserveBeginTime}}-{{item.reserveEndTime}}</text>
			</view>
			<view class="footer">
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		emits: ['tapReceive', 'tapReject'],
		name: 'inviteOrderItem',
		props: {
			list: {
				type: Array,
				default: []
			},
			//oss
			ossUrl: {
				type: String,
				default: ''
			}

		},
		data() {
			return {

			};
		},
		methods: {
			receiveClick() {
				this.$emit('tapReceive')
			},
			rejectClick() {
				this.$emit('tapReject')
			},
			tapOrderDetails(item) {
				uni.navigateTo({
					url: '/pages/order/modules/orderTutorDetails/orderTutorDetails?orderId=' + item.id
				})
			}
		}
	};
</script>

<style lang="scss" scoped>
	.TutorStatusCards {
		padding-top: 30rpx;

		.item {
			box-shadow: 0rpx 0rpx 4rpx 0rpx rgba(214, 214, 214, 0.5);
			border-radius: 24rpx 24rpx 24rpx 24rpx;
		}

		.card {
			background-color: #fff;
			border-radius: 20rpx;

			.top {
				display: flex;
				justify-content: space-between;
				align-items: center;
				color: #b2b3b3;
				padding: 20rpx;
				font-size: 24rpx;
				border-bottom: 2rpx solid #f6f6f6;

				.invite {
					color: #ed6e5e;
				}
			}

			.content {
				padding: 20rpx;
				display: flex;

				.content_lt {
					width: 160rpx;
					height: 160rpx;
					overflow: hidden;
					/* 防止图片溢出 */
					border-radius: 20rpx;

					.image {
						width: 100%;
						height: 100%;
						object-fit: cover;
					}
				}

				.content_rt {
					width: calc(100% - 160rpx);
					padding-left: 20rpx;

					.tp_lt {
						font-weight: 600;
						font-size: 36rpx;
					}

					.ct {
						padding: 16rpx 0;
						font-size: 24rpx;

					}

					.bt {
						color: #777777;
						font-size: 28rpx;
					}
				}

			}

			.bottom {
				color: #b0b1b1;
				font-size: 24rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 10rpx 20rpx;

				.total {
					color: #646464;
					display: flex;
					align-items: center;
				}

				.totalPrice {
					color: #e25e42;
					font-weight: bold;
					font-size: 36rpx;
				}
			}

			.footer {
				display: flex;
				align-items: center;
				justify-content: space-between;

				padding: 20rpx;

				.button_item {
					display: flex;
					align-items: center;
					justify-content: space-between;
					width: 55%;
				}

				.footer_lt {
					font-size: 24rpx;
					color: #e9b87a;
				}
			}
		}
	}
</style>